<template>
	<view>
		<view class="">
			<view class="m-h1" style="text-align: center;">
				选择定制类型
			</view>
			<view class="" @tap="toBack()">
				<image class="nav-margin-back-img" src="../../static/back.png" mode="widthFix"></image>
			</view>
		</view>	
		<view class="nav-margin-top" style="display: flex;">
			<view class="nav-list">
				<view class="nav-list-bottom-active"  style="margin-top: 20rpx;">
					类型
				</view>
				<view style="position: relative;top: -7rpx;">
					<view style="display: flex; justify-content: center;">
						<view class="nav-list-icon-active">
						</view>
					</view>
				</view>
			</view>
			
			<view class="nav-list">
				<view class="nav-list-bottom"  style="margin-top: 20rpx;">
					规格
				</view>
				<view style="position: relative;top: -7rpx;">
					<view style="display: flex; justify-content: center;">
						<view class="nav-list-icon">
						</view>
					</view>
				</view>
			</view>
			
			<view class="nav-list">
				<view class="nav-list-bottom"  style="margin-top: 20rpx;">
					配送
				</view>
				<view style="position: relative;top: -7rpx;">
					<view style="display: flex; justify-content: center;">
						<view class="nav-list-icon">
						</view>
					</view>
				</view>
			</view>
			
			<view class="nav-list">
				<view class="nav-list-bottom"  style="margin-top: 20rpx;">
					结算
				</view>
				<view style="position: relative;top: -7rpx;">
					<view style="display: flex; justify-content: center;">
						<view class="nav-list-icon">
						</view>
					</view>
				</view>
			</view>
			
	
		</view>
		
		<view class="box-content">
			<view class="content" style="margin-top: 36rpx;">
				<view class="content-flex">
					<view class="">
						<view class="content-h2">
							选择砌块类型
						</view>
						<view class="content-p-mini">请根据您的需求选择适合的类型进行定制</view>
					</view>
					<view class="">
						<image style="width: 23rpx;height: 23rpx;margin-right: 20rpx;" src="../../static/warning.png" mode="widthFix"></image>
						<text class="content-p-mini">定制说明</text>
					</view>
				</view>
			
				<view class="content-flex" style="margin-top: 64rpx;">
					
					
					<view @tap="isActive('isActive1')" v-bind:class="[isActive1?'content-list-box-active':'content-list-box']" >
							<text :class="[isActive1?'content-h3-active':'content-h3']">常规砌块</text>
					</view>
					
					
					<view @tap="isActive('isActive2')" v-bind:class="[isActive2?'content-list-box-active':'content-list-box']" >
							<text :class="[isActive2?'content-h3-active':'content-h3']">保温砌块</text>
					</view>
				</view>
				
				<view class="content-flex">
					
					<view @tap="isActive('isActive3')" v-bind:class="[isActive3?'content-list-box-active':'content-list-box']" >
							<text :class="[isActive3?'content-h3-active':'content-h3']">隔音砌块</text>
					</view>
					
					<view @tap="isActive('isActive4')" v-bind:class="[isActive4?'content-list-box-active':'content-list-box']" >
							<text :class="[isActive4?'content-h3-active':'content-h3']">防震砌块</text>
					</view>

				</view>
				
				<view class="content-flex" >
					<view class="content-list-box">
							<text class="content-h3-none">防裂砌块</text>
					</view>
					
					<view class="content-list-box">
							<text class="content-h3-none">防震防裂砌块</text>
					</view>
				</view>
				
	
				
				
				
			</view>
		</view>
		
		<view class="content">
			<button type="default" style="background-color: #1B4098;color: #FFFFFF;margin-top: 6rpx;" @tap="toEnactTwo()">下一步</button>
			
			<view class="" style="position: relative;top: 48rpx; display: flex;justify-content: center;">
				<view class="" style="background-color: #000000;height: 10rpx;width: 268rpx;">
					
				</view>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive1:true,
				isActive2:false,
				isActive3:false,
				isActive4:false,
				isActive5:false,
				isActive6:false,
				isActive7:false,
				isActive8:false,
				
			}
		},
		methods: {
			isActive:function(a){
				if(a=='isActive1'){
					this.isActive1 = !this.isActive1;
					this.isActive2 = false;
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = false;
					this.isActive6 = false;
					this.isActive7 = false;
					this.isActive8 = false;
				}else if(a=='isActive2'){
					this.isActive1 = false;
					this.isActive2 = !this.isActive2;
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = false;
					this.isActive6 = false;
					this.isActive7 = false;
					this.isActive8 = false;
				}else if(a=='isActive3'){
					this.isActive1 = false;
					this.isActive2 = false;
					this.isActive3 = !this.isActive3;
					this.isActive4 = false;
					this.isActive5 = false;
					this.isActive6 = false;
					this.isActive7 = false;
					this.isActive8 = false;
				}else if(a=='isActive6'){
					this.isActive1 = false;
					this.isActive2 = false;
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = false;
					this.isActive6 = !this.isActive6;
					this.isActive7 = false;
					this.isActive8 = false;
				}else if(a=='isActive4'){
					this.isActive1 = false;
					this.isActive2 = false;
					this.isActive3 = false;
					this.isActive4 = !this.isActive4;
					this.isActive5 = false;
					this.isActive6 = false;
					this.isActive7 = false;
					this.isActive8 = false;
				}else if(a=='isActive5'){
					this.isActive1 = false;
					this.isActive2 = false;
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = !this.isActive5;
					this.isActive6 = false;
					this.isActive7 = false;
					this.isActive8 = false;
				}else if(a=='isActive8'){
					this.isActive1 = false;
					this.isActive2 = false;
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = false;
					this.isActive6 = false;
					this.isActive7 = false;
					this.isActive8 = !this.isActive8;
				}else if(a=='isActive7'){
					this.isActive1 = false;
					this.isActive2 = false;
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = false;
					this.isActive6 = false;
					this.isActive7 = !this.isActive7;
				}
			},
			toBack:function(){
				console.log(1)
				uni.navigateBack({
					delta: 1 //返回上一级页面
				})
			},
			toEnactTwo:function(){
				uni.navigateTo({
					url:"../enact-2/enact-2"
				})
			}
		}
	}
</script>

<style scoped lang="less">
@import url("enact-1.less");
@import url("../../style.less");
</style>
